<script setup>
import {ref} from 'vue'
const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 10,message: '长度在 6 到 10 个字符', trigger: ''}
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
}
const formData = ref({
  username: '',
  password: ''
})
const  generateRandomFourDigits= () => Math.floor(1000 + Math.random() * 9000);
const code = generateRandomFourDigits()

</script>
<template>
  <div class="container">
    <div class="main">
      <div class="left"></div>
      <div class="right">
        <div class="title"><p>系统登录</p></div>
        <div class="form">
          <el-form :rules="rules" :model="formData">
            <el-form-item prop="username"><el-icon><User /></el-icon><el-input placeholder="请输入账号" v-model="formData.username"/></el-form-item>
            <el-form-item prop="password"><el-icon><Check /></el-icon><el-input placeholder="请输入密码" v-model="formData.password"/></el-form-item>
            <div class="code">
              <el-form-item style="margin-bottom: 0;" prop="code"><el-input style="width: 100px;flex: 1;margin-left: 23px;" placeholder="验证码" class="code-input"></el-input></el-form-item>
              <div style="flex: 1;">{{ code }}</div>
            </div>
            <div class="agree">
              <el-checkbox label="同意协议" style="margin-top: 20px;"></el-checkbox>
            </div>
            <div class="btn">
              <el-button type="success">登录</el-button>
              <el-button type="primary">重置</el-button>
            </div>
          </el-form>
        </div>
        <div class="bottom">
          <p class="register-p">还没有账号?点击这里<span class="register">注册</span>吧</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.container{
  width: 100vw;
  height: 100vh;

  background-color: bisque;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.main{
  width: 50%;
  height: 50%;
  background-color: #f4f4f4;
  display: flex;
}
.left{
  flex: 1;
  background-color: green;
  background-image: url('../assets/login-main-left.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.right{
  flex: 1;
}
.title{
  text-align: center;
  font-size: 30px;
}
.el-form-item{
  margin-bottom: 20px;
}
.form{
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn{
  display: flex;
  justify-content: space-around;
}
.el-button{
  width: 140px;
  margin-top: 20px;
}
.el-input{
  width: 300px;
  height: 34px;
}
.el-icon{
  font-size: 24px;
}
.register-p{
  float: right;
  margin-top: 50px;
  font-size: 16px;
  margin-right: 10px;
}
.register{
  color: #409eff;
  cursor: pointer;
}
.bottom{
  position: absolute;
  top: 640px;
  left: 1200px;
}
.code{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>